<template>
  <div>
    <span v-if="readonly">{{ type.includes('range') ? `${value[0] || ''} ~ ${value[1] || ''}` : value }}</span>
    <el-date-picker
      v-else
      style="width: 100%"
      :value="value"
      :readonly="readonly"
      :type="type"
      :size="size"
      :format="format"
      :value-format="valueFormat"
      :range-separator="separator"
      :placeholder="placeholder"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      @input="handleChange"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'MDatePicker',
  props: {
    value: {},
    readonly: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'daterange',
    },
    size: {
      type: String,
      default: 'small',
    },
    format: {
      type: String,
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd',
    },
    separator: {
      type: String,
      default: '至',
    },
    placeholder: {
      type: String,
      default: 'Por favor elige',
    },
    startPlaceholder: {
      type: String,
      default: 'Por favor elige',
    },
    endPlaceholder: {
      type: String,
      default: 'Por favor elige',
    },
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
    },
  },
}
</script>
